<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>性别：{{sex}}</h2>
  <button @click="sayHello">说话(vue3所配置的——sayHello)</button>
  <br />
  <br />
  <button @click="sayWelcome">说话(vue2所配置的——sayWelcome)</button>
</template>

<script>
  // import {h} from 'vue'
  export default {
    name: 'App',

    data(){
      return {
        sex: '男'
      }
    },
    methods: {
      sayWelcome(){
        alert('欢迎学习Vue')
      }
    },

    // 此处只是测试一下setup，暂时不考虑响应式的问题
    setup(){
      // 数据
      let name = '张三'
      let age = 18

      // 方法
      function sayHello(){
        alert(`我叫${name}，我${age}岁了，你好啊！`)
      }

      // 返回一个对象（常用）
      return {
        name,
        age,
        sayHello
      }

      // 返回一个函数（渲染函数）
      return ()=> h('h1','你好')
    }
  }
</script>

